
<!DOCTYPE html>
<html>
<head>
    <title>典型案例 - FineUI - 基于 ExtJS 的专业 ASP.NET 控件库</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <meta name="Title" content="基于 ExtJS 的专业 ASP.NET 控件库，拥有原生的 AJAX 支持和华丽的UI效果 (ExtJS based ASP.NET Controls with native AJAX Support and rich UI effects)" />
    <meta name="Description" content="FineUI 的使命是创建 No JavaScript，No CSS，No UpdatePanel，No ViewState，No WebServices 的网站应用程序" />
    <meta name="Keywords" content="extjs,ext,asp.net,controls,asp.net 2.0,ajax,web2.0" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="http://fineui.com/res/css/docs.css" rel="stylesheet">
	<!--[if lt IE 9]>
		<script src="/js/html5.js"></script>
	<![endif]-->
	
	<link href="http://fineui.com/res/lightbox/css/lightbox.css" rel="stylesheet">
	<style>
		#masonry_container
		{
			min-height: 600px;
		}
		#masonry
		{
			padding: 0;
			margin: 0 auto;
		}
		#masonry .thumbnail
		{
			float: left;
			width: 330px;
			margin: 20px;
			padding: 0;
			border-width: 1px;
			-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
					box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		}
		#masonry .thumbnail .imgs
		{
			padding: 1px;
			height: 200px;
			line-height: 200px;
			overflow: hidden;
		}
		#masonry .thumbnail .imgs img
		{
			margin-bottom: 5px;
		}
		#masonry .thumbnail .caption
		{
			background-color: #fff;
			padding-top: 0;
			font-size: 13px;
			padding-top: 5px;
			border-top: solid 1px #eee;
			background-color: #efefef;
		}
		#masonry .thumbnail .caption .title
		{
			font-size: 13px;
			font-weight: bold;
			margin: 5px 0;
			text-align: left;
		}
		#masonry .thumbnail .caption .author
		{
			font-size: 11px;
			text-align: right;
		}
		
		
		.lightbox .lb-image
		{
			max-width: none;
		}
		
		/*
		#masonry .thumbnail.style1
		{
			border-color: #d6e9c6;
		}
		#masonry .thumbnail.style1 .caption
		{
			color: #468847;
			background-color: #dff0d8;
			border-color: #d6e9c6;
		}
		#masonry .thumbnail.style1 .caption a
		{
			color: #468847;
			text-decoration: underline;
		}
		
		
		#masonry .thumbnail.style3
		{
			border-color: #428bca;
		}
		#masonry .thumbnail.style3 .caption
		{
			color: #fff;
			background-color: #428bca;
			border-color: #428bca;
		}
		#masonry .thumbnail.style3 .caption a
		{
			color: #fff;
			text-decoration: underline;
		}
		
		#masonry .thumbnail.style4
		{
			border-color: #bce8f1;
		}
		#masonry .thumbnail.style4 .caption
		{
			color: #3a87ad;
			background-color: #d9edf7;
			border-color: #bce8f1;
		}
		#masonry .thumbnail.style4 .caption a
		{
			color: #3a87ad;
			text-decoration: underline;
		}
		*/
	</style>
</head>
    
<body data-spy="scroll" data-target=".bs-docs-sidebar">
    
    <div id="masonry_container" class="container">
		
		<div id="masonry" class="container-fluid">
		</div>
		
		<div id="loading" class="alert alert-success" style="text-align:center; margin:20px;">
			正在加载...
		</div>
		
		<div id="masonry_ghost" class="hide">
		
		 <!--{foreach from = $commodity_info item = c}-->
			<div class="thumbnail">
				<div class="imgs">
					<input type="hidden" value="<!--{$c.image_url|get_img_url:'commodity'}-->">
				</div>
				<div class="caption">
					<div class="title">简单OA管理系统</div>
					<div class="content">
						
					</div>
					<div class="author">
						by <a target="_blank" href="http://fineui.com/bbs/home.php?mod=space&uid=2426">小小生</a>
					</div>
				</div>
			</div>
			<!--{/foreach}-->
			
			
		</div>
		
	
	</div>
	
    
    <script src="http://fineui.com/lib/jquery/jquery-1.8.2.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="http://fineui.com/res/js/main.js"></script>
	
	<script src="/js/masonry.pkgd.min.js"></script>
	<script src="/js/imagesloaded.pkgd.min.js"></script>
	<script src="/js/lib/lightbox-2.6.min.js"></script>
	
	<script>
		$(function() {
		
			var loadingNode = $('#loading');
			var ghostNode = $('#masonry_ghost').find('.thumbnail'), i, ghostIndexArray = [];
			var ghostCount = ghostNode.length;
			for(i=0; i<ghostCount; i++){
				ghostIndexArray[i] = i; 
			}
			ghostIndexArray.sort(function(a, b) {
				if(Math.random() > 0.5) {
					return a - b;
				} else {
					return b - a;
				}
			});
			
			var currentIndex = 0;
			var masNode = $('#masonry');
			
			
			function getNewItems() {
				var newItemContainer = $('<div/>');
				for(var i=0; i<9; i++) {
					if(currentIndex < ghostCount) {
						newItemContainer.append(ghostNode.get(ghostIndexArray[currentIndex]));
						currentIndex++;
					}
				}
				return newItemContainer.find('.thumbnail');
			}
			
			function processNewItems(items) {
				items.each(function() {
					var $this = $(this);
					var imgsNode = $this.find('.imgs');
					var title = $.trim($this.find('.title').text().replace(/\n/ig, ''));
					var author = $.trim($this.find('.author').text().replace(/\n/ig, ''));
					title += '&nbsp;&nbsp;(' + author + ')';
					var lightboxName = 'lightbox_'; // + imgNames[0];
					
					var imgNames = imgsNode.find('input[type=hidden]').val().split(',');
					imgsNode.append('<a href="./images/large/'+ imgNames[0] +'" data-lightbox="'+ lightboxName +'" title="'+ title +'"><img src="'+ imgNames[0] +'" /></a>');
					/*
					$.each(imgNames, function(index, item) {
						imgsNode.append('<a href="./images/large/'+ item +'" data-lightbox="'+ lightboxName +'" title="'+ title +'"><img src="./images/'+ item +'" /></a>');
					});
					*/
				});
			}
			
			
			var msnry;
			
			function initMasonry() {
				var items = getNewItems().css('opacity', 0);
				processNewItems(items);
				
				masNode.append(items);
				
				msnry = new Masonry(masNode[0], {
					itemSelector: '.thumbnail',
					isFitWidth: true,
					transitionDuration: '0.8s',
					hiddenStyle: { opacity: 0 },
					visibleStyle: { opacity: 1}
				});
				
				loadingNode.hide();
				items.animate({'opacity': 1}, 300);
			}
			
			
			function appendToMasonry() {
				var items = getNewItems().css('opacity', 0);
				
				if(items.length) {
					loadingNode.hide();
					processNewItems(items);
					
					masNode.append(items);
					
					msnry.appended(items);
					
				}
			}
			
			
			initMasonry();
			
			$(window).scroll(function() {
				
				if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {
					
					appendToMasonry();
					
				}
				
			});
			
			
			
			function randomColor() {
				var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
				for (; rand.length < 6;) {
					rand = '0' + rand;
				}
				return '#' + rand;
			}
			
			
		});
	</script>
</body>
</html></html>